body{
  background: #eeeeee;
  overflow-x: hidden;
}
.box{
    font-size:15px;
}
.search{
  width:100%;
  height:100px;
  /* background:red; */
  display: flex;
  align-items: center;
  justify-content: center;
}
header{
  width:100%;
  height:80px;
  background:#2196f3;
  display: flex;
  position: fixed;
  top:0px;
  left:0px;
  z-index:888;
}
.logo{
  width:20%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:30px;
  color:#fff;
  transition: all .5s;
}
.navs{
  width:80%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .5s;
}
.navs > a{
  color:#fff;
  width: 25%;
  height:100%;
  text-align: center;
  line-height: 80px;
  font-size:20px;
  transition: all .5s;
}
.logo:hover{
 font-size:40px;
 background:#36a3fa;
}

.navs > a:hover{
  background:#36a3fa;
}

.mu-menu{
  display: none;
  line-height: 80px;
}
.mu-item-title a{
  color:#333;
}
.mu-menu-activator > button{
  align-items: center;
  justify-content: center;
  width:80px;
  height:100%;
  color:#fff;
}
.mu-popover{
  display: none;
}


section{
  width:70%;
  height:auto;
  float: left;
}
.mu-card-media-title{
  padding:0 15px;
}
.mu-card-actions button{
  width:49%;
}
.container{
  width:50%;
  float: left;
  margin-bottom:10px;
  transition: all .5s;
}
.demo-loadmore-wrap {
  width: 100%;
  max-width: 360px;
  height: 420px;
  display: flex;
  flex-direction: column;
}
.mu-appbar {
  width: 100%;
}
.demo-loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mu-card-media{
  overflow: hidden;
}
.img{
  transition: all .5s;
}
.img:hover{
  opacity: 0.8;
  transform: scale(1.4);
}
.mu-card-title{
  width:inherit;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.mu-flat-button{
  color:#2196f3;
}

aside{
  width:29%;
  height:auto;
  float: right;
  margin-top:8px;
  /* background:olive; */
}

aside > .container{
  width:100%;
  padding:0;
}
aside .button-wrapper {
  text-align: center;
}

aside .mu-button{
  margin: 8px;
}
.mu-expansion-panel-content img{
  display: block;
  margin:0 auto;
}

article{
  clear: both;
  width:100%;
  height:100%;
  background:url(../image/about.jpg);
  background-size:100% 100%;
  margin-top: 75px;
  /* filter: blur(2px); */
}
.about{
  width:80%;
  height:100%;
  color:#fff;
  margin:0 auto;
  padding:10px;
}
.about_cont{
  padding:10px;
  transition: all 0.5s;
}
.about_cont:hover{
  color:#333;
  background:rgba(255, 255, 255, 1);
}
.about p{
  font-size:25px;
}
.about ul li{
  margin-top:10px;
}

footer{
  /* position:absolute;
  top: 100%;
  left:0; */
  clear: both;
  width:100%;
  height:auto;
  background: #333;
  clear: both;
  padding:10px;
  color:#FFF;
  /* margin-top:300px; */
  /* z-index: 999; */
}
.link button{
  margin:0 0 5px 5px;
}
.footer_bm p img{
  width:25px;
  height:auto;
  vertical-align:middle;
}
.footer_bm p{
  text-align: center;
}
footer a{
  color:#fff;
}

footer .mu-flat-button{
  color:#fff;
}
aside .container,.mu-load-more{
  margin-bottom: 160px;
}


@media screen and (max-width:830px){
  .logo{
    width:30%;
    height:100%;
    font-size:20px;
  }
  .logo:hover{
    font-size:20px;
    background:#36a3fa;
   }
  .navs{
    width:70%;
    height:100%;
    font-size:15px;
    display: none;
  }
  .mu-menu{
    display: block;
    position: absolute;
    right:0px;
    width:80px;
    height:80px;
  }
  .mu-popover{
    display: block;
  }
  section{
    width:100%;
  }
  aside{
    width:100%;
  }
  .container{
    min-width:100%;
  }
  article{
    background:#333;
  }
  
}
.mu-carousel{
  height: 320px;
}
.mu-carousel-button.mu-icon-button{
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}